<template>
  <div class="cosmopolis">
    <div :style="{ marginBottom: '16px' }">
      <a-button @click="add"> + </a-button>
    </div>
    <a-tabs
      v-model="activeKey"
      hide-add
      type="editable-card"
      @edit="onEdit"
      @change="callback"
    >
      <a-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :tab="pane.title"
        :closable="pane.closable"
      >
        <json-editor @getJson="getJson" ref="jsonEditor" v-model="value" />
      </a-tab-pane>
    </a-tabs>
    <a-modal v-model="visible" title="Title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 取消 </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          确定
        </a-button>
      </template>
      <a-input v-model="language" />
      <h4>请输入语言名称（英文）</h4>
    </a-modal>
  </div>
</template>
<script>
import JsonEditor from "@/components/JsonEditor";

export default {
  components: {
    JsonEditor,
  },
  data() {
    const panes = [
      {
        title: "en",
        content: {
          zh: "汉语",
          en: "英文",
          serverNotAvaliable: "服务器暂时去给马斯克发射火箭去了🚀",
          pageMissing: "~~",
          archives: "归档",
          total: "共计",
          totalSearch: "共搜索到",
          piece: "篇",
          passwd: "密码",
          wrongPasswd: "密码错误",
          protectedArticleMsg: "文章受保护，请输入访问密码",
          backHome: "回首页",
          confirm: "确认",
          unknownTitle: "未知标题",
          articleCover: "文章封面",
          publishAt: "发布于",
          readings: "阅读量",
          copyrightInfo: "版权信息",
          copyrightContent: "非商用-署名-自由转载",
          categoryArticle: "分类文章",
          gettingArticle: "正在获取文章...",
          comment: "评论",
          gettingKnowledge: "正在获取知识...",
          knowledgeBooks: "知识小册",
          readingCount: "次阅读",
          startReading: "开始阅读",
          pleaseWait: "敬请期待",
          otherKnowledges: "其他知识笔记",
          unknownKnowledgeChapter: "未知章节内容",
          recommendToReading: "推荐阅读",
          yu: "与",
          tagRelativeArticles: "标签有关的文章",
          all: "所有",
          readingCountTemplate: "次阅读",
          articleCountTemplate: "篇文章",
          share: "分享",
          empty: "暂无数据",
          categoryTitle: "文章分类",
          commentNamespace: {
            reply: "回复",
            emoji: "表情",
            replyPlaceholder: "请输入评论内容（支持 Markdown）",
            publish: "发布",
            close: "收起",
            commentSuccess: "评论成功，已提交审核",
            userInfoTitle: "请设置你的信息",
            userInfoName: "名称",
            userInfoNameValidMsg: "请输入您的称呼",
            userInfoEmail: "邮箱",
            userInfoEmailValidMsg: "输入合法邮箱地址，以便在收到回复时邮件通知",
            userInfoConfirm: "设置",
            userInfoCancel: "取消",
          },
          loading: "加载中",
          copySuccess: "复制成功",
          copy: "复制",
          article: "文章",
          searchArticle: "文章搜索",
          searchArticlePlaceholder: "输入关键字，搜索文章",
          shareNamespace: {
            title: "分享海报",
            createingPoster: "海报生成中，请耐心等待...",
            createdPosterSuccess: "分享海报制作完成。",
            createdPosterError: "分享海报制作失败，请手动截图",
            qrcode: "识别二维码查看文章",
            shareFrom: " 原文分享自",
          },
          tagTitle: "文章标签",
          toc: "目录",
          abc: "刘子涵",
        },
        key: "0",
      },
      {
        title: "zh",
        content: {
          zh: "Chinese",
          en: "English",
          serverNotAvaliable:
            "The server is going to launch a rocket for Musk now 🚀",
          pageMissing: "This page went to space with Bezos",
          archives: "Archives",
          total: "Total",
          totalSearch: "Totally searched ",
          piece: " Count",
          passwd: "Password",
          wrongPasswd: "Wrong Password",
          protectedArticleMsg:
            "The article is protected, please enter the access password",
          backHome: "Back to Home",
          confirm: "Confirm",
          unknownTitle: "Unknown Title",
          articleCover: "Article Cover",
          publishAt: "Publish At",
          readings: "Reading",
          copyrightInfo: "Copyright Information",
          copyrightContent: "Non-commercial-Attribution-Freely Reprinted",
          categoryArticle: "Category",
          gettingArticle: "Fetching articles...",
          comment: "Comment",
          gettingKnowledge: "Fetching knowledge books...",
          knowledgeBooks: "Knowledge Books",
          readingCount: "reading",
          startReading: "Start Reading",
          pleaseWait: "Coming soon",
          otherKnowledges: "Other Knowledge Books",
          unknownKnowledgeChapter: "Unknown Chapter",
          recommendToReading: "Recommended Readings",
          yu: "About",
          tagRelativeArticles: "tag related articles",
          all: "All",
          readingCountTemplate: "reading",
          articleCountTemplate: "count",
          share: "Share",
          empty: "No data",
          categoryTitle: "Category",
          commentNamespace: {
            reply: "Reply",
            emoji: "Emoji",
            replyPlaceholder:
              "Please enter the content of the comment (Markdown is supported)",
            publish: "Send",
            close: "Close",
            commentSuccess:
              "The comment is successful and has been submitted for review",
            userInfoTitle: "Please set your information",
            userInfoName: "Username",
            userInfoNameValidMsg: "Please tell me your name",
            userInfoEmail: "Email",
            userInfoEmailValidMsg: "Please enter correct email",
            userInfoConfirm: "Save",
            userInfoCancel: "Cancel",
          },
          loading: "Loading",
          copySuccess: "Copy successfully",
          copy: "copy",
          article: "Articles",
          searchArticle: "Search Articles",
          searchArticlePlaceholder: "Enter keywords, search articles",
          shareNamespace: {
            title: "Share Poster",
            createingPoster:
              "The poster is being generated, please be patient...",
            createdPosterSuccess: "The poster is completed.",
            createdPosterError: "Fail to generate poster.",
            qrcode: "Scan the QR code to read the article",
            shareFrom: " Original shared from ",
          },
        },
        key: "1",
      },
    ];
    return {
      activeKey: panes[0].key,
      panes,
      newTabIndex: panes.length,
      currentIndex: 0,
      value: panes[0].content,
      loading: false,
      visible: false,
      language: "",
    };
  },
  methods: {
    callback(key) {
      console.log(key);
      const content = this.panes[key].content;
      console.log(content);
      this.value = content;
      console.log(
        arguments,
        "arguments...",
        arguments[0],
        this.panes[arguments[0]].content
      );
    },  
    getJson(value){
        // console.log(value,);
        this.panes.forEach((item,index,key) =>{
            // let obj = {
            //   name:'1', label:"22"
            // }
          console.log(item,index,key,JSON.stringify(key));

        })
    },
    // 修改
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    // 添加事件   显示弹框
    add() {
      this.visible = true;
    },
    // 弹框   成功事件
    handleOk(e) {
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
        this.panes.push({
          title: this.language,
          content: {},
          key: this.panes.length,
        });
      }, 1000);
    },
    // 弹框取消事件
    handleCancel(e) {
      this.visible = false;
    },
    // 删除
    remove(targetKey) {
      let activeKey = this.activeKey;
      let lastIndex;
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const panes = this.panes.filter((pane) => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = panes[0].key;
        }
      }
      this.panes = panes;
      this.activeKey = activeKey;
    },
  },
};
</script>
<style></style>
